<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业信息查询系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background-color: #f5f7fa;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }
    .container {
      max-width: 1200px;
      margin: 20px auto;
    }
    .filter-container {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    .filter-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }
    .filter-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    .filter-item label {
      margin-right: 10px;
      color: #606266;
      font-size: 14px;
    }
    .filter-buttons {
      display: flex;
      gap: 10px;
      margin-left: auto;
    }
    .table-container {
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    .page-title {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }
    .page-title:before {
      content: '';
      display: block;
      width: 4px;
      height: 18px;
      background: #409eff;
      margin-right: 10px;
      border-radius: 2px;
    }
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
    @media (max-width: 768px) {
      .filter-row {
        flex-direction: column;
        align-items: stretch;
      }
      .filter-item {
        width: 100%;
      }
      .filter-buttons {
        margin-left: 0;
        justify-content: flex-end;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="page-title">企业信息查询</div>
      
      <div class="filter-container">
        <div class="filter-row">
          <div class="filter-item">
            <label>企业：</label>
            <el-input 
              v-model="input" 
              placeholder="请输入企业名称" 
              style="width: 220px"
              clearable>
            </el-input>
          </div>
          
          <div class="filter-item">
            <label>时间：</label>
            <el-date-picker 
              v-model="value1" 
              type="daterange" 
              range-separator="至" 
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 380px">
            </el-date-picker>
          </div>
          
          <div class="filter-item">
            <el-select 
              v-model="value" 
              placeholder="请选择类别"
              style="width: 180px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          
          <div class="filter-buttons">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="info" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </div>
      
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品 ID" prop="id" sortable></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="描述" prop="desc"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small" style="color: #67c23a;">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          input: '',
          options: [{
            value: '选项1',
            label: '食品类'
          }, {
            value: '选项2',
            label: '日用品'
          }, {
            value: '选项3',
            label: '电子产品'
          }, {
            value: '选项4',
            label: '服饰鞋帽'
          }, {
            value: '选项5',
            label: '家居用品'
          }],
          value: '',
          value1: '',
          tableData: [{
            id: '12987122',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
          }, {
            id: '12987123',
            name: '香酥蛋黄酥',
            category: '糕点类',
            desc: '纯手工制作，皮薄馅足',
            address: '杭州市西湖区文三路',
            shop: '西湖茶点屋',
            shopId: '10334'
          }, {
            id: '12987124',
            name: '无糖全麦面包',
            category: '烘焙类',
            desc: '无添加糖分，富含膳食纤维',
            address: '北京市朝阳区三里屯',
            shop: '健康生活馆',
            shopId: '10335'
          }, {
            id: '12987125',
            name: '有机高山绿茶',
            category: '茶饮类',
            desc: '高山云雾绿茶，有机种植',
            address: '黄山市徽州区茶园路',
            shop: '黄山茶庄',
            shopId: '10336'
          }]
        }
      }
    })
  </script>
</body>
</html>